<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="__LAYUI__/css/layui.css" rel="stylesheet">
    <style>
        .container {
            display: flex;
            justify-content: start;
        }

        .image-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            color: #ccc;
            cursor: pointer;
            position: relative;
            margin-right: 20px;
        }

        .image-box img {
            max-width: 100%;
            max-height: 100%;
        }

        .image-box .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            border: none;
            padding: 2px;
            cursor: pointer;
            display: none;
        }

        /* 移动端布局 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                /* 垂直排列 */
                align-items: flex-start;
                /* 左对齐 */
            }

            .image-box {
                margin-right: 0;
                margin-top: 20px;
                /* 移除右侧间距 */
            }
        }

        .layui-disabled,
        .layui-disabled:hover {
            color: #cccccc !important;
            cursor: not-allowed !important;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <form class="layui-form  layui-padding-3" action="" style="background-color: #fff;">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">隐藏内容</label>
                <div class="layui-input-block">
                    <textarea placeholder="文章类型为默认可忽略" class="layui-textarea" name="hide_content"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1" selected>默认</option>
                        <option value="2">积分</option>
                        <option value="3">回复</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                    <select name="cate_id">
                        <option value="">请选择分类</option>
                        {foreach $cate.data as $k => $v}
                        <option value="{$v.id}" {$v.pid==0 ? 'disabled' : '' }>{$v.cate_name}</option>
                        {/foreach}

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">积分</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="number" name="score" placeholder="" autocomplete="off" class="layui-input" min="0"
                            step="1" lay-affix="number" value="0">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-filter="aihao">
                        <option value="0">待审核</option>
                        <option value="1" selected>正常</option>
                        <option value="2">锁定</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否置顶</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_top" lay-skin="switch" lay-filter="switchTest" title="开启|关闭">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否加精</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_hot" lay-skin="switch" lay-filter="switchTest" title="开启|关闭">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章图片</label>
                <div class="container">
                    <div class="image-box" data-index="0">+</div>
                    <div class="image-box" data-index="1">+</div>
                    <div class="image-box" data-index="2">+</div>
                </div>
                <input type="file" id="fileInput" style="display: none;">
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即添加</button>
                </div>
            </div>
        </form>
    </div>


    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var util = layui.util;
            $ = layui.$;


            // 提交事件
            form.on('submit(demo1)', function (data) {
                var field = data.field; // 获取表单字段值
                field.is_hot = field.is_hot == 'on' ? 1 : 0
                field.is_top = field.is_top == 'on' ? 1 : 0
                images = ''
                img = $('.image-box')
                for (i = 0; i < img.length; i++) {
                    imgs = $($(img)[i]).children('img').attr('src')
                    if (imgs != '' && imgs != undefined) {
                        images += imgs + ','
                    }

                }
                field.images = images
                $.post('/admin/article/doAdd', field, (res) => {
                    if (res.code == 200) {
                        layer.msg('添加成功')
                    } else {
                        layer.msg(res.msg)
                    }
                })
                return false;
            });


            // 上传图片
            const uploadUrl = '/admin/article/uploadImg';
            images = ''
            $('.image-box').click(function () {
                th = $(this)
                if ($(this).text() === '+') {
                    $('#fileInput').click();
                    $('#fileInput').off('change').on('change', function (event) {
                        const file = event.target.files[0];
                        if (file) {
                            const formData = new FormData();
                            formData.append('images', file);

                            $.ajax({
                                url: uploadUrl,
                                type: 'POST',
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function (res) {
                                    if (res.code == 200 && res.data) {
                                        th.append('.image-box').html(`
                                    <img src="${res.data}" alt="Uploaded Image" class="preview-image">
                                    <button class="delete-btn">&times;</button>
                                `);
                                        th.find('.delete-btn').show();
                                    } else {
                                        layer.msg(res.msg)
                                    }
                                },
                                error: function () {
                                    layer.msg('上传失败')
                                }
                            });
                        }
                    });
                }
            });

            $(document).on('click', '.delete-btn', function () {
                $(this).parent().html('+').find('.delete-btn').hide();
            });
            // 图片预览功能
            var $articleImages = document.querySelectorAll('.preview-image');
            var images = [];

            // 收集所有图片URL
            $articleImages.forEach(function (img) {
                images.push({
                    src: img.src,
                    alt: img.alt
                });
            });

            // 为每张图片绑定点击事件
            $articleImages.forEach(function (img, index) {
                img.onclick = function () {
                    // 使用layer.photos进行图片预览
                    layer.photos({
                        photos: {
                            "title": "文章图片预览",
                            "id": "article-images",
                            "start": index,
                            "data": images
                        },
                        anim: 5 // 缩放动画效果
                    });
                };
            });
        });


    </script>
    </div>
</body>

</html>